import { Input, NavBar, TextArea } from "antd-mobile";
import { useEffect, useState } from "react";
import styles from "./index.module.scss";

type Props = {
  onClose: () => void;
  value: string;
  type: "" | "name" | "intro";
  onUpdateProfile: (type: "name" | "intro", value: string) => void;
};

const EditInput = ({ onClose, value, type, onUpdateProfile }: Props) => {
  const [inputValue, setInputValue] = useState(value);

  const onSave = () => {
    // 通过该判断，去掉 type 属性中的 '' 类型，解决类型不一致的问题
    if (type === "") return;
    onUpdateProfile(type, inputValue);
    // onUpdateName(inputValue);
  };

  useEffect(() => {
    // value 为 null 或 undefined 时，设置为默认值为空字符串
    setInputValue(value ?? "");
  }, [value]);

  const isName = type === "name";
  return (
    <div className={styles.root}>
      <NavBar
        onBack={onClose}
        className="navbar"
        right={
          <span className="commit-btn" onClick={onSave}>
            提交
          </span>
        }
      >
        编辑{isName ? "昵称" : "简介"}
      </NavBar>
      {isName ? (
        <Input
          placeholder="请输入"
          value={inputValue}
          onChange={setInputValue}
        />
      ) : (
        <TextArea
          className="textarea"
          placeholder="请输入"
          // 展示：右下角的字数统计
          showCount
          // 指定内容最大长度
          maxLength={100}
          // 指定 文本域 展示内容的行数（文本域高度）
          rows={4}
          value={inputValue}
          onChange={setInputValue}
        />
      )}
    </div>
  );
};

export default EditInput;
